<template>
    <view class="mo-avatar-group" :class="_classes" :style="_styles">
        <view
            class="mo-avatar-group__item"
            v-for="(_item, _index) in avatars"
            :key="_index"
            :class="[
                `mo-avatar-group__item--animation-${animationStatus}`,
                _index === 0 && ('mo-avatar-group__item--first'), 
                _index === avatars.length - 1 && ('mo-avatar-group__item--last')
            ]"
            @animationend="onAnimationend(_index)"
        >
            <image class="mo-avatar-group__image" :src="_item[keyName]" :mode="mode" />
        </view>
        <view class="mo-avatar-group__item mo-avatar-group__item--more" v-if="showMore" @tap="emits('more')">
            <!-- <mo-icon class="mo-avatar-group__icon" :name="moreIconName" v-bind="moreIconProps"></mo-icon> -->
			<u-icon class="u-font-24" :name="moreIconName"></u-icon>
        </view>
    </view>
</template>
<script>
/**
 * 头像组
 * 
 */
import props from "./props.js";
export default {
    name: 'mo-avatar-groups',
    props,
    data() {
        return {
            // 展示数据的起始索引
            startIndex: 0,
            // 动画状态
            animationStatus: 'wait',
        }
    },
    computed:{
        
        // 是否应用动画
        isAnimation(){
            // 头像数量小于设置的展示数量，不应用动画
            if (this.list.length <= this.number) return false;
            return this.animation;
        },
        // 组件类名
        _classes() {
            const classes = [];
            // 是否开启动画
            if (this.isAnimation) classes.push("mo-avatar-group--animation");
            return classes;
        },
        // 组件样式
        _styles(){
            const styles = [];
            // 头像宽度
            if (this.width) styles.push(`--mo-avatar-group-avatar-size: ${this.width}`);
            // 头像高度
            if (this.height) styles.push(`--mo-avatar-group-avatar-size: ${this.height}`);
            // 头像偏移量
            if (this.offset) styles.push(`--mo-avatar-group-avatar-offset: ${this.offset}`);
            // 列数
            styles.push(`--mo-avatar-group-columns: ${this.columns}`);

            return styles;
        },
        // 展示的头像列表
        avatars(){
            // 传入的头像列表长度 <= 设置的展示数量
            if (this.list.length <= this.number) return this.list;

            // 开启了动画
            if (this.isAnimation) {
                // 多设置一个，用于动画
                const count = this.number + 1;

                // 传入的头像列表长度 > 设置的展示数量
                // 如果从起始索引开始到结束的数量小于设置的展示数量
                if (this.list.length - this.startIndex < count) {
                    // 剩余的头像列表
                    const lastList = this.list.slice(this.startIndex);
                    // 循环从头像列表的起始索引开始到设置的展示数量
                    return lastList.concat(this.list.slice(0, count - lastList.length));
                }

                // 传入的头像列表长度 > 设置的展示数量
                return this.list.slice(this.startIndex, this.startIndex + count);
            }

            // 没开启动画
            return this.list.slice(0, this.number);
        },
        
        /**
         * 计算 item 的 class
         */
         calcItemClass() {
            return (item, index) => {
                console.log(97, item, index)
                const classes = [];
                if (index === 0) classes.push("mo-avatar-group__item--first");
                if (index === this.avatars.length - 1) classes.push("mo-avatar-group__item--last");
                classes.push(`mo-avatar-group__item--animation-${this.animationStatus}`);
                return classes;
            }
        },
    },
    watch: {
    },
    created(){
    },
    mounted() {
        this.startAnimation();
    },
    methods: {
        /**
         * 开始动画
         */
        startAnimation() {
            // console.log(145, this.startIndex)
            if (this.isAnimation) {
                let timer = setTimeout(() => {
                    this.animationStatus = "play";
                    clearTimeout(timer);
                }, this.delay);
            }
        },
        /**
         * 动画结束的回调函数
         * @param {Number} index 头像下标，主要是为了只触发一次这个函数
         */
        onAnimationend(index) {
            if (this.animationStatus === "play") {
                // 更新索引
                if (index === 0) {
                    this.startIndex = this.startIndex + 1 >= this.list.length ? 0 : this.startIndex + 1;
                }
                this.$nextTick(() => {
                    // H5需要延迟一下，要不会抖动，小程序反而不用，🐶🐶🐶🐶🐶🐶🐶🐶
                    // #ifdef H5
                    let timer = setTimeout(() => {
                        this.animationStatus = "";
                        clearTimeout(timer);
                    }, 10);
                    // #endif

                    // #ifndef H5
                    this.animationStatus = "";
                    // #endif
                });
                // 开始下次动画
                this.startAnimation();

            }
        },

    }
}
</script>

<style lang="scss" scoped>
    .mo-avatar-group {
        display: inline-flex;
        align-items: center;

        &__item {
            width: var(--mo-avatar-group-avatar-size, 40rpx);
            height: var(--mo-avatar-group-avatar-size, 40rpx);
            border-radius: var(--mo-avatar-group-avatar-border-radius, 50%);
            overflow: hidden;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
            background: var(--mo-avatar-group-avatar-background, #ffffff);

            &:not(:first-child) {
                margin-left: calc(-1 * var(--mo-avatar-group-avatar-offset, 15rpx));
            }

            &--more {
                background: var(--mo-avatar-group-more-background, #ffffff);
                color: #c3c3c3;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        &__image {
            width: 100%;
            height: 100%;
        }

        &--animation {
            .mo-avatar-group__item {
                animation-timing-function: ease-in-out;
                animation-duration: var(--mo-avatar-group-animation-duration, 300ms);
                animation-fill-mode: forwards;

                &.mo-avatar-group__item--animation-play {
                    animation-name: mo-avatar-group-ani-move;
                }
            }

            .mo-avatar-group__item--more {
                margin-left: calc(-1 * var(--mo-avatar-group-avatar-size, 40rpx));
            }

            .mo-avatar-group__item--first {
                &.mo-avatar-group__item--animation-play {
                    animation-name: mo-avatar-group-ani-leave;
                }
            }

            .mo-avatar-group__item--last {
                opacity: 0;
                transform: scale(0);

                &.mo-avatar-group__item--animation-play {
                    animation-name: mo-avatar-group-ani-enter;
                }
            }
        }

        @keyframes mo-avatar-group-ani-leave {
            100% {
                opacity: 0;
                transform: scale(0);
            }
        }

        @keyframes mo-avatar-group-ani-move {
            100% {
                transform: translateX(calc(-1 * (var(--mo-avatar-group-avatar-size, 40rpx) - var(--mo-avatar-group-avatar-offset, 15rpx))));
            }
        }

        @keyframes mo-avatar-group-ani-enter {
            100% {
                opacity: 1;
                transform: scale(1) translateX(calc(-1 * (var(--mo-avatar-group-avatar-size, 40rpx) - var(--mo-avatar-group-avatar-offset, 15rpx))));
            }
        }
    }
</style>
